<template>
  <span>
    <el-tooltip v-if='text == "" || text == undefined' class=item effect=light :content='content' :placement='placement'>
      <el-button
        :type="type"
        link
        :disabled="disabled"
        :icon="iconName"
        @click.stop='onIconClik'
      ></el-button>
    </el-tooltip>
    <el-button v-else
        :type="type"
        link
        :disabled="disabled"
        :icon="iconName"
        @click.stop='onIconClik'
      >{{text}}</el-button>
    </span>
</template>

<script>
export default {
  name: 'OperationIcon',
  props: {
    // icon classname
    iconName: {
      type: String,
      default: () => {return 'el-icon-picture'}
    },
    // 类型: primary、success、info、warning、danger
    type: {
      type: String,
      default: () => {return 'primary'}
    },
    // 显示的内容
    content: {
      type: String,
      default: () => {return '请设置提示信息'}
    },
    // Tooltip 的出现位置
    placement: {
      type: String,
      default: () => {return 'bottom'}
    },
    // 文本
    text: {
      type: String,
      default: () => {return ''}
    },
    disabled: {
      type: Boolean,
      default: () => {return false}
    }
  },
  methods: {
    onIconClik(e) {
      if(this.disabled) {
        return
      }
      this.$emit('click', e)
    }
  }
}
</script>

